<!--
    group: 企业管理
    name: 添加企业
    url: /enterprise/addEnterprise
-->
<template>
  <div>
    <!--  主体部分  -->
    <div class="main_content">
      <h3><span class="icons"></span>请选择您要注册的企业类型</h3>
      <div class="box">
        <!--      @click="activeItem(item.id)"-->
        <!--   entType     企业类型 1-个体工商户 2-有限公司 3-合伙企业 4-个人独资企业-->
<!--        <div class="item" ref="companyStyle"-->
<!--             v-for="item in list" :key="item.entType"-->
<!--             :class="{active:item.entType == isActive}"-->
<!--        >-->
        <div class="itemImg" ref="companyStyle"
             v-for="item in list" :key="item.id"
        >

          <img :src="item.imgUrl" alt="企业类型">

<!--          <h4><span>{{ item.entTypeDesc }}</span></h4>-->
<!--          <div class="content">-->
<!--            <div class="item_middle">-->
<!--              <div class="item_top">-->
<!--                <img src="../../assets/index/ent01.png" alt="">-->
<!--                <p>-->
<!--                  <span>{{ item.invoiceMaxDesc }}</span>-->
<!--                  <span>年度开票额</span>-->
<!--                </p>-->
<!--              </div>-->
<!--              <div class="item_top">-->
<!--                <img src="../../assets/index/ent02.png" alt="">-->
<!--                <p>-->
<!--                  <span>{{ item.taxPayerTypeDesc }}</span>-->
<!--                  <span>纳税人类型</span>-->
<!--                </p>-->
<!--              </div>-->
<!--              <div class="item_top">-->
<!--                <img src="../../assets/index/ent03.png" alt="">-->
<!--                <p>-->
<!--                  <span>{{ item.invoiceTypeDesc }}</span>-->
<!--                  <span>发票类型</span>-->
<!--                </p>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="rate">-->
<!--              <h5>税率</h5>-->
<!--              <div class="rate_item">-->
<!--                <template v-for="jery in item.invoiceTypeConfList">-->
<!--                  <p class="describe">-->
<!--                    <span>发票类型：</span>-->
<!--                    <span>-->
<!--                      {{ jery.invoiceTypeDesc}}-->
<!--                    </span>-->
<!--                  </p>-->
<!--                  <p class="describe">-->
<!--                    <span>综合税率：</span>-->
<!--                    <span>-->
<!--                {{ jery.taxDesc }}-->
<!--              </span>-->
<!--                  </p>-->
<!--                </template>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->

<!--          <div :class="item.entType == isActive ? 'default' : 'mantle'">敬请期待</div>-->
        </div>
      </div>

      <div class="footer">
        <a-button type="primary" class="btnsLarge" @click="nextStep">下一步</a-button><br>
      </div>
    </div>
  </div>
</template>

<script>
import { getChannelByUserId,queryServicePrice } from '@/api/enterprise'
import { conversionElement,cloneObject,Storage } from '@/utils/util'
import { getLoginChannel4Reg } from '@api/register'
export default {
  name: 'addEnterprise',
  data(){
    return{
      isActive: 1,  //可选择选项  个体工商户
      // list: [],
      list: [
        {
          id: 1,
          imgUrl: require('../../assets/enterpriseType/type01.png')
        },
        {
          id: 2,
          imgUrl: require('../../assets/enterpriseType/type02.png')
        },
        {
          id: 3,
          imgUrl: require('../../assets/enterpriseType/type03.png')
        },
        {
          id: 4,
          imgUrl: require('../../assets/enterpriseType/type04.png')
        },
      ],
      inputStyWidth: null,
    }
  },
  mounted() {
    // this.getRegistrationType();  //获取企业类型列表
    this.newAddBtn();
    this.getLoginChannel4RegFun()
  },
  methods:{
    getLoginChannel4RegFun(){
        getLoginChannel4Reg().then(res => {
          if(res.success){
            // 获取当前用户的合作模式  1 渠道总  2 非渠道总  3 混合模式
            const protocolType =  res.result.channelInfoVo.protocolType
            Storage.set('protocolType',protocolType)
          }else{
            this.$message.warning(res.message);
          }
        })
      },

    //切换
    activeItem(index){
      this.isActive = index;
    },
    //下一步
    nextStep(){
      const userProtocolType =  Storage.get('protocolType')
      let url = ''
      const param = {registerType: this.isActive}
      //渠道
      if(userProtocolType==3){
        //合作模式页面
        url = '/enterprise/addCooperationMode'
      }else{
        //服务模式页面
        url = '/enterprise/addServiceMode'
        param['protocolType'] = userProtocolType
      }

      this.$router.push({
        path: url,
        query: param
      })
    },
    newAddBtn() {
      let me = this;
      this.$nextTick(function() {
        me.inputStyWidth = me.$refs.companyStyle[0].clientWidth;
      })
    },
    //获取列表
    getRegistrationType(){
      getChannelByUserId().then(res => {
        if (res.success){
          if (res.result){
            this.list = res.result || [];
            let a = cloneObject(this.list);
            // for(let i in this.list){
            //   this.list[i].yearServiceFee = conversionElement(a[i].yearServiceFee);
            //   this.list[i].renewServiceFee = conversionElement(a[i].renewServiceFee);
            // }
          }
        }else{
          this.$message.warning(res.message);
        }
      })
    },
  }
}
</script>

<style scoped lang="less">
h3{
  font-weight: bolder;
  color: @color-smudge;
}

.box{
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  //flex-wrap: wrap;
  margin-top: 71px;
}
.itemImg{
  width: 23%;
  height: 370px;
  cursor: pointer;
  img{
    width: 100%;
    height: 100%;
  }
}
.item{
  //width: 360px;
  width: 23%;
  //height: 587px;
  position: relative;
  //padding: 20px 0;
  border-radius: 11px;
  margin-bottom: 20px;
  color: @color-smudge;
  border: 1px solid #CACACA;
  cursor: pointer;
  h4{
    margin-top: -5px;
    font-size: 20px;
    //margin-left: 30px;
    font-weight: bolder;
    text-align: center;
    span{
      //width: 80%;
      width: 200px;
      height: 40px;
      line-height: 40px;
      display: inline-block;
      color: #FFFFFF;
      background: url("../../assets/index/enterprisebg.svg") no-repeat;
      background-size: 100% 100%;
    }
  }
  .content{
    width: 100%;
    padding: 20px 30px;
    .item_middle{
      width: 100%;
      //padding: 10px 0 30px 0;
      .item_top{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 10px;
        //flex-wrap: wrap;
        img{
          width: 33px;
          height: 33px;
          vertical-align: middle;
        }
        p{
          width: 40%;
          margin: 0 0 0 20px;
          span{
            width: 100%;
            display: block;
            //text-align: center;
            font-size: 12px;
            margin-top: 6px;
            color: @color-lightGary;
          }
          span:nth-child(1){
            font-weight: bolder;
            color: @color-smudge;
          }
        }
      }
    }
    .rate{
      width: 100%;
      margin-top: 20px;
      h5{
        width: 50%;
        text-align: center;
        //margin-left: 30px;
        font-weight: bolder;
        margin-bottom: 20px;
        font-size: 16px;
      }
      .rate_item{
        width: 50%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding-left: 30px;
      }
      .describe{
        width: 51%;
        display: flex;
        align-items: center;
        span{
          white-space: nowrap;
        }
        //margin-left: 30px;
      }
    }
  }
}
.active{
  border: 0;
  background: rgba(243,246,253,1);
}

.footer{
  text-align: center;
  margin: 60px 0;
  .ant-checkbox-wrapper{
    line-height: 40px;
    color: @color-lightGary;
  }
}

.fontDefault{
  width: 163px;
  font-size: 14px;
  span{
    font-size: 24px;
  }
}
.fontActive{
  width: 110px;
  font-size: 10px;
  span{
    font-size: 14px;
  }
}
.fontActive1{
  width: 130px;
  font-size: 12px;
  span{
    font-size: 18px;
  }
}

//蒙层
.mantle{
  width: 100%;
  height: 101%;
  border-radius: 11px;
  background: rgba(0,0,0,0.7);
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: @color-white;
  font-size: 30px;
}
.default{
  display: none;
}

</style>
